<template>
    <a-card style="width: 100%; height: 880px;">
        <div>
            <a-select placeholder="请选择部门" style="width: 180px" @change="getProduct">
                <a-select-option v-for="item in this.dept"
                    :key="item"
                    :label="item"
                    :value="item">
                    {{ item }}
                </a-select-option>
            </a-select>
            <a-select placeholder="请选择产品" style="width: 180px" @change="getProductionLine">
                <a-select-option v-for="item in this.product"
                    :key="item"
                    :label="item"
                    :value="item">
                    {{ item }}
                </a-select-option>
            </a-select>
            <a-select placeholder="请选择生产线" style="width: 180px" @change="getPoint">
                <a-select-option v-for="item in this.productionLine"
                    :key="item"
                    :label="item"
                    :value="item">
                    {{ item }}
                </a-select-option>
            </a-select>
            <a-select placeholder="请选择点位" style="width: 180px" @change="getData">
                <a-select-option v-for="item in this.point"
                    :key="item"
                    :label="item"
                    :value="item">
                    {{ item }}
                </a-select-option>
            </a-select> &nbsp;&nbsp;&nbsp;&nbsp;
            <a-select placeholder="请选择数据类型" style="width: 180px" v-model="value1" @change="parseData">
                <a-select-option value="1">电压</a-select-option>
                <a-select-option value="2">电流</a-select-option>
                <a-select-option value="3">功率</a-select-option>
                <a-select-option value="4">功率因数</a-select-option>
            </a-select>
        </div>
        <div id="main" class="five"></div>
    </a-card>
</template>
    
<script>
import { httpAction, getAction } from '@/api/manage'
import * as echarts from 'echarts';
export default {
    data() {
        return {
            url: {
                list1: "/consumptionElectricity/consumptionElectricity/getScreenLeftTop",
                getDept: '/sys/sysDepart/list',
                getProduct: '/product/product/getProductByDept',
                getProductionLine: '/productionLine/productionLine/getByProduct',
                getPoint: '/energyMeterMapping/energyMeterMapping/getPointByProductionLine',
                getData: '/consumptionElectricity/consumptionElectricity/getByPoint'
            },
            dept:[],
            product:[],
            productionLine:[],
            point: [],
            value1: undefined,
            chart: null,
            data: [],
        };
    },
    mounted() {
    },
    created(){
        this.getDept();
    },
    methods: {
        getDept(){
            this.dept = []
            getAction(this.url.getDept).then((res)=>{
                res.result.forEach(element => {
                    this.dept.push(element.departName)
                })
            })
        },
        getProduct(value){
            this.product = []
            getAction(this.url.getProduct + "?dept=" + value).then((res)=>{
                res.result.forEach(element => {
                    this.product.push(element.name)
                })
            })
        },
        getProductionLine(value){
            this.productionLine = []
            getAction(this.url.getProductionLine + "?product=" + value).then((res)=>{
                res.result.forEach(element => {
                    this.productionLine.push(element.name)
                })
            })
        },
        getPoint(value){
            this.point = []
            getAction(this.url.getPoint + "?productionLine=" + value).then((res)=>{
                res.result.forEach(element => {
                    this.point.push(element.point)
                })
            })
        },
        getData(value) {
            getAction(this.url.getData + "?point=" + value)
                .then((res) => {
                    if (res.success) {
                        this.$nextTick(() => {
                            this.data = res.result;
                            this.parseData(this.value1);
                        });
                    }   
                })
        },
        parseData(value){
            if(Array.isArray(this.data) && this.data.length){
                switch(value){
                    case "1":
                        this.initVoltage(this.data);
                        break;
                    case "2":
                        this.initCurrent(this.data);
                        break;
                    case "3":
                        this.initPower(this.data);
                        break;
                    case "4":
                        this.initFactor(this.data);
                        break;
                }
            }
        },
        initVoltage(result) {
            if(this.chart != null && this.chart != '' && this.chart != undefined){
                this.chart.dispose();
            }
            var chartDom = document.getElementById('main');
            this.chart = echarts.init(chartDom);
            var option;

            let date = [];
            let voltageA = [];
            let voltageB = [];
            let voltageC = [];
            let voltageAb = [];
            let voltageBc = [];
            let voltageCa = [];
            result.forEach(e => {
                date.push(e.date);
                voltageA.push(e.voltageA);
                voltageB.push(e.voltageB);
                voltageC.push(e.voltageC);
                voltageAb.push(e.voltageAb);
                voltageBc.push(e.voltageBc);
                voltageCa.push(e.voltageCa);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageA
                    },
                    {
                        name: 'B相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageB
                    },
                    {
                        name: 'C相电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageC
                    },
                    {
                        name: 'AB线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageAb
                    },
                    {
                        name: 'BC线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageBc
                    },
                    {
                        name: 'CA线电压',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: voltageCa
                    }
                ]
            };

            option && this.chart.setOption(option);
        },
        initCurrent(result) {
            if(this.chart != null && this.chart != '' && this.chart != undefined){
                this.chart.dispose();
            }
            var chartDom = document.getElementById('main');
            this.chart = echarts.init(chartDom);
            var option;

            let date = [];
            let currentA = [];
            let currentB = [];
            let currentC = [];
            
            result.forEach(e => {
                date.push(e.date);
                currentA.push(e.currentA);
                currentB.push(e.currentB);
                currentC.push(e.currentC);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentA
                    },
                    {
                        name: 'B相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentB
                    },
                    {
                        name: 'C相电流',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: currentC
                    }
                ]
            };

            option && this.chart.setOption(option);
        },
        initPower(result){
            if(this.chart != null && this.chart != '' && this.chart != undefined){
                this.chart.dispose();
            }
            var chartDom = document.getElementById('main');
            this.chart = echarts.init(chartDom);
            var option;

            let date = [];
            let powerA = [];
            let powerB = [];
            let powerC = [];
            let powerTotal = [];
            
            result.forEach(e => {
                date.push(e.date);
                powerA.push(e.powerA);
                powerB.push(e.powerB);
                powerC.push(e.powerC);
                powerTotal.push(e.powerTotal);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerA
                    },
                    {
                        name: 'B相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerB
                    },
                    {
                        name: 'C相有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerC
                    },
                    {
                        name: '总有功功率',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: powerTotal
                    }
                ]
            };

            option && this.chart.setOption(option);
        },
        initFactor(result){
            if(this.chart != null && this.chart != '' && this.chart != undefined){
                this.chart.dispose();
            }
            var chartDom = document.getElementById('main');
            this.chart = echarts.init(chartDom);
            var option;

            let date = [];
            let factorA = [];
            let factorB = [];
            let factorC = [];
            let factorTotal = [];
            
            result.forEach(e => {
                date.push(e.date);
                factorA.push(e.factorA);
                factorB.push(e.factorB);
                factorC.push(e.factorC);
                factorTotal.push(e.factorTotal);
            })

            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                    return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '数据监控'
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                    type: 'inside',
                    start: 0,
                    end: 10
                    },
                    {
                    start: 0,
                    end: 10
                    }
                ],
                series: [
                    {
                        name: 'A相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorA
                    },
                    {
                        name: 'B相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorB
                    },
                    {
                        name: 'C相功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorC
                    },
                    {
                        name: '总功率因数',
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: factorTotal
                    }
                ]
            };

            option && this.chart.setOption(option);
        }
  },
}


</script>

<style>
.five {
width: 100%;
height: 450px;
}
</style>